﻿// contextPanel

(function ($, undefined) {

    // define the name of the UI component
    var ui_name = "contextPanel"

    // initialize object
    var cp = $.contextPanel = {

        // default values
        defaults: {
            offsetX: 10,
            offsetY: 10
        },

        setDefaults: function (defaultOptions) {
            this.defaults = $.extend({}, this.defaults, defaultOptions);
        }
    };

    $.fn.contextPanel = function (options) {

        // method calling
        if (typeof options == 'string') {
            var args = Array.prototype.slice.call(arguments, 1),
			res;
            this.each(function () {
                var data = $.data(this, ui_name);
                if (data) {
                    var meth = data[options];
                    if (meth) {
                        var r = meth.apply(this, args);
                        if (res === undefined) {
                            res = r;
                        }
                    }
                }
            });
            if (res !== undefined) {
                return res;
            }
            return this;
        }

        var globle = {
            contextPanelCover: null
        }

        // initialize options
        options = $.extend({}, cp.defaults, options);

        this.each(function () {
            var _self = $(this);

            // initialize callback
            for (var key in options) {
                var value = options[key];
                if (typeof value == 'function') {
                    // bind callbacks
                    $(_self).bind(key, value);
                }
            }

            //initialize
            if (_self) {
                initializeDom();
            }
            

            /* Private Methods
            -----------------------------------------------------------------------------*/

            function initializeDom() {
                var desireLeft = $(options.parent).offset().left + options.offsetX;
                var desireTop = $(options.parent).offset().top + options.offsetY;

                $(_self)
                  .addClass('context-panel')
                  .css({
                    'left': desireLeft + "px",
                    'top': desireTop + "px"
                })
                .appendTo('body')
                .show();


                //增添一个透明的fade   
                globle.contextPanelCover = $('<div class="contextPanelCover"></div>')
                    .appendTo($('body'))
                    .show();

                globle.contextPanelCover.click( closeContextPanel );
            }

            function closeContextPanel() {
                globle.contextPanelCover.remove();
                
                onContextPanelClose();
                _self.hide();

                // 避免重复绑定事件
                _self.unbind('contextPanelClose')
            }


            /* Callback Triggers
            -----------------------------------------------------------------------------*/

            function onContextPanelClose() {
                $(_self).trigger("contextPanelClose");
            }


            /* Public Methods
            -----------------------------------------------------------------------------*/

            var publicMethods = {
                //set options
                option: function (name, value) {
                    if (value === undefined) {
                        return options[name];
                    }
                    options[name] = value;
                },

                close: closeContextPanel
            };

            $.data(this, ui_name, publicMethods);


        });

        return this;
    };



})(jQuery);
